<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>R2Ga - PvZ Reanim到Godot动画转换器</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f5f5f5;
            display: flex;
            min-height: 100vh;
        }
        /* 导航栏样式 */
        nav {
            width: 250px;
            background-color: #3a5320;
            color: white;
            padding: 20px 0;
            position: sticky;
            top: 0;
            height: 100vh;
            overflow-y: auto;
        }

        .nav-header {
            padding: 0 20px 20px;
            border-bottom: 1px solid #4a6b22;
            margin-bottom: 20px;
        }

            .nav-header h2 {
                margin: 0;
                color: white;
            }

        .nav-menu {
            list-style: none;
            padding: 0;
            margin: 0;
        }

            .nav-menu li a {
                display: block;
                padding: 10px 20px;
                color: #e0e0e0;
                text-decoration: none;
                transition: all 0.3s;
            }

                .nav-menu li a:hover {
                    background-color: #4a6b22;
                    color: white;
                }

                .nav-menu li a.active {
                    background-color: #8bc34a;
                    color: white;
                    font-weight: bold;
                }
        /* 主内容区样式 */
        main {
            flex: 1;
            padding: 20px;
        }

        .content-section {
            display: none;
            background-color: white;
            padding: 25px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }

            .content-section.active {
                display: block;
            }

        header {
            background-color: #4a6b22;
            color: white;
            padding: 20px;
            border-radius: 5px;
            margin-bottom: 30px;
            text-align: center;
        }

        h1 {
            margin: 0;
            font-size: 2.5em;
        }

        h2 {
            color: #4a6b22;
            border-bottom: 2px solid #8bc34a;
            padding-bottom: 5px;
            margin-top: 20px;
        }

        h3 {
            margin: 15px 0 10px;
        }

        .feature-box {
            background-color: #f1f8e9;
            padding: 15px;
            border-left: 4px solid #8bc34a;
            margin: 20px 0;
            border-radius: 0 5px 5px 0;
        }

        .warning-box {
            background-color: #fff8e1;
            padding: 15px;
            border-left: 4px solid #ffc107;
            margin: 20px 0;
            border-radius: 0 5px 5px 0;
        }

        code {
            background-color: #f0f0f0;
            padding: 2px 5px;
            border-radius: 3px;
            font-family: 'Courier New', monospace;
        }

        .code-block {
            background-color: #f5f5f5;
            padding: 10px;
            border-radius: 5px;
            overflow-x: auto;
            margin: 15px 0;
        }

        .download-btn {
            display: inline-block;
            background-color: #8bc34a;
            color: white;
            padding: 10px 20px;
            text-decoration: none;
            border-radius: 5px;
            font-weight: bold;
            margin-top: 10px;
            transition: background-color 0.3s;
        }

            .download-btn:hover {
                background-color: #7cb342;
            }

        footer {
            text-align: center;
            margin-top: 40px;
            color: #7f8c8d;
            font-size: 0.9em;
        }

        .mode-table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }

            .mode-table th, .mode-table td {
                border: 1px solid #ddd;
                padding: 8px;
                text-align: left;
            }

            .mode-table th {
                background-color: #f2f2f2;
            }

            .mode-table tr:nth-child(even) {
                background-color: #f9f9f9;
            }

        .version-history {
            margin: 20px 0;
        }

        .version-item {
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }

        .version-title {
            font-weight: bold;
            color: #4a6b22;
            margin-bottom: 5px;
        }

        .version-date {
            color: #7f8c8d;
            font-size: 0.9em;
            margin-bottom: 5px;
        }

        .contact-info {
            margin: 15px 0;
        }

        .contact-item {
            margin-bottom: 10px;
        }

        .contact-label {
            font-weight: bold;
            display: inline-block;
            width: 150px;
        }

        iframe {
            width: 100%;
            /* 或动态高度（根据比例） */
            aspect-ratio: 16/9; /* 16:9 比例 */
        }

        video {
            max-width: 100%;
            height: auto;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            body {
                flex-direction: column;
            }
            nav {
                width: 100%;
                height: auto;
                position: relative;
            }
            main {
                padding: 15px;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav>
        <div class="nav-header">
            <h2>R2Ga 导航</h2>
        </div>
        <ul class="nav-menu">
            <li><a href="#intro" class="active" data-section="intro">前言</a></li>
            <li><a href="#features" data-section="features">功能特点</a></li>
            <li><a href="#usage" data-section="usage">使用指南</a></li>
            <li><a href="#versions" data-section="versions">版本历史</a></li>
            <li><a href="#resources" data-section="resources">资源下载</a></li>
            <li><a href="#contact" data-section="contact">联系我们</a></li>
        </ul>
    </nav>

    <!-- 主内容区 -->
    <main>
        <!-- 前言部分 -->
        <section id="intro" class="content-section active">
            <header>
                <h1>R2Ga (PvZ Reanim to Godot Animation)</h1>
                <p>将植物大战僵尸的Reanim格式转换为Godot引擎动画的专业工具</p>
            </header>

            <h2>关于R2Ga</h2>
            <p>R2Ga 是一个专门用于将植物大战僵尸(PvZ)的Flash动画特殊导出格式(.reanim)转换为Godot引擎兼容动画资源的工具。</p>
            <p>本工具旨在帮助游戏开发者将经典的植物大战僵尸动画资源快速、高效地转换到现代游戏引擎Godot中，保留原始动画的精髓同时获得更好的性能和灵活性。</p>

            <div class="feature-box">
                <h3>为什么选择R2Ga?</h3>
                <ul>
                    <li>专为PvZ动画转换优化，保持原始动画的精确性</li>
                    <li>简化从Flash到Godot的工作流程</li>
                    <li>开源免费，社区驱动开发</li>
                    <li>支持批量处理，提高工作效率</li>
                </ul>
            </div>
        </section>

        <!-- 功能特点部分 -->
        <section id="features" class="content-section">
            <h2>功能特点</h2>

            <div class="feature-box">
                <h3>核心功能</h3>
                <ul>
                    <li><strong>精准转换</strong>: 专为PvZ的Reanim格式优化，确保动画转换的准确性</li>
                    <li><strong>多模式支持</strong>: 提供三种输出模式适应不同开发需求</li>
                    <li><strong>高效处理</strong>: 快速处理大量动画文件</li>
                    <li><strong>资源自动关联</strong>: 自动处理动画与素材的关联关系</li>
                    <li><strong>开源自由</strong>: 遵循GPL 3.0协议，完全免费</li>
                    <li><strong>免拼场景功能</strong>: 简化场景设置流程</li>
                </ul>
            </div>

            <h3>技术优势</h3>
            <p>R2Ga采用高效的C语言实现，具有以下技术优势：</p>
            <ul>
                <li>低内存占用，高性能处理</li>
                <li>精确解析Reanim二进制格式</li>
                <li>生成优化的Godot动画资源</li>
                <li>支持命令行操作，易于集成到自动化流程</li>
                <li>优化的读取方式，提高转换效率</li>
            </ul>
        </section>

        <!-- 使用指南部分（合并后的内容） -->
        <section id="usage" class="content-section">
            <h2>使用指南</h2>

            <!-- 视频教程按钮 -->
            <div style="margin: 20px 0; text-align: center;">
                <a href="https://www.bilibili.com/video/BV1s3ZbY3E9L/"
                   class="download-btn"
                   target="_blank"
                   rel="noopener noreferrer"
                   style="display: inline-flex; align-items: center; gap: 8px;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <polygon points="23 7 16 12 23 17 23 7"></polygon>
                        <rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
                    </svg>
                    点击观看视频教程
                </a>
            </div>

            <h3>基本命令格式</h3>
            <div class="code-block">
                <code>r2ga reanim源文件 动画存放文件夹 素材存放文件夹 mode</code>
            </div>

            <h3>参数说明</h3>
            <ul>
                <li><strong>reanim源文件</strong>: 植物大战僵尸的.reanim动画文件</li>
                <li><strong>动画存放文件夹</strong>: 在Godot中以"res://"开头的目录路径，用于存放生成的动画.tres文件</li>
                <li><strong>素材存放文件夹</strong>: 在Godot中以"res://"开头的目录路径，用于存放动画所需的素材图片</li>
                <li><strong>mode</strong>: 转换模式，有三种可选 (auto, tscn_by_anim, anim_tres)</li>
            </ul>

            <h3>使用示例</h3>
            <div class="code-block">
                <code>r2ga zombie.reanim res://animations/ res://assets/textures/ auto</code>
            </div>

            <h3>详细步骤</h3>
            <ol>
                <li>准备好.reanim文件和对应的素材图片</li>
                <li>确定Godot项目中存放动画和素材的路径</li>
                <li>根据需求选择合适的转换模式</li>
                <li>运行转换命令</li>
                <li>在Godot中导入生成的资源</li>
                <li>测试动画效果，确保转换无误</li>
            </ol>

            <h3>模式选择说明</h3>
            <table class="mode-table">
                <tr>
                    <th>模式</th>
                    <th>描述</th>
                    <th>适用场景</th>
                </tr>
                <tr>
                    <td><code>auto</code></td>
                    <td>自动模式，生成的资源文件最全</td>
                    <td>推荐大多数情况使用，确保不会缺少任何资源</td>
                </tr>
                <tr>
                    <td><code>tscn_by_anim</code></td>
                    <td>生成单个包含动画的.tscn场景文件</td>
                    <td>当reanim文件只包含一个动画且不需要额外资源时</td>
                </tr>
                <tr>
                    <td><code>anim_tres</code></td>
                    <td>生成单个.tres动画资源文件</td>
                    <td>已有场景文件，只需要动画资源时</td>
                </tr>
            </table>

            <div class="warning-box">
                <h4>模式选择建议</h4>
                <ul>
                    <li><strong>推荐无脑选auto</strong>，因为<code>auto</code>模式给出来的目标文件只会多不会少。只有在特定需求下才选择其他模式。</li>
                    <li>如果Reanim文件里只有一个动画，且不想有多余的动画文件产生，可选择<code>tscn_by_anim</code></li>
                    <li>如果原先已经有场景文件了，且动画自己分割过，可选择<code>anim_tres</code></li>
                </ul>
            </div>

            <h3>模式对比示例</h3>
            <p>以下是一个动画转换后不同模式输出的文件结构示例：</p>
            <div class="code-block">
                <code>
                    # auto模式输入                 <br>
                    &emsp;&emsp;        reanim/                    <br>
                    &emsp;&emsp;        └ zombie.reanim           <br>
                    # auto模式输出                 <br>
                    &emsp;&emsp;        animations/                <br>
                    &emsp;&emsp;        ├── zombie_walk.tres    <br>
                    &emsp;&emsp;        ├── zombie_idle.tres    <br>
                    &emsp;&emsp;        └── zombie.tscn         <br>
                    <br>
                    # tscn_by_anim模式输入         <br>
                    &emsp;&emsp;        reanim/                    <br>
                    &emsp;&emsp;        └ zombie.reanim           <br>
                    # tscn_by_anim模式输出         <br>
                    &emsp;&emsp;        animations/                <br>
                    &emsp;&emsp;        └── zombie.tscn         <br>
                    <br>
                    # anim_tres模式输入            <br>
                    &emsp;&emsp;        reanim/                    <br>
                    &emsp;&emsp;        └ zombie_walk.reanim      <br>
                    # anim_tres模式输出            <br>
                    &emsp;&emsp;        animations/                <br>
                    &emsp;&emsp;        └── zombie_walk.tres    <br>
                </code>
            </div>

        </section>


        

        <!-- 版本历史部分 -->
        <section id="versions" class="content-section">
            <h2>版本历史</h2>

            <div class="version-history">
                <div class="version-item">
                    <div class="version-title">PVZ_reanim2godot_animation_v3.1 (Lasted)</div>
                    <div class="version-date">Apr 1 - v3.1-stable</div>
                    <ul>
                        <li>加入透明度支持</li>
                    </ul>
                </div>


                <div class="version-item">
                    <div class="version-title">PVZ_reanim2godot_animation_v3.0</div>
                    <div class="version-date">Mar 25 - v3.0-stable</div>
                    <ul>
                        <li>自动分割动画</li>
                        <li>场景文件与动画文件自动关联</li>
                        <li>新增对blendmode的支持</li>
                        <li>优化对空轨道的处理</li>
                        <li>将tscn模式改为tscn_by_anim模式</li>
                    </ul>
                </div>


                <div class="version-item">
                    <div class="version-title">PVZ_reanim2godot_animation_v2.2</div>
                    <div class="version-date">Jan 30 - v2.2-stable</div>
                    <ul>
                        <li>做了模式区分</li>
                    </ul>
                </div>

                <div class="version-item">
                    <div class="version-title">PVZ_reanim2godot_animation_v2.0</div>
                    <div class="version-date">Jan 20 - v2.0-stable</div>
                    <ul>
                        <li>添加了免拼场景功能</li>
                        <li>修复优化了读取方式</li>
                    </ul>
                </div>

                <div class="version-item">
                    <div class="version-title">PVZ_reanim2godot_animation_v1.1</div>
                    <div class="version-date">Dec 28, 2024 - 1.1-stable</div>
                    <ul>
                        <li>修复了大量bug</li>
                    </ul>
                </div>

                <div class="version-item">
                    <div class="version-title">PVZ_reanim2godot_animation_v1.0</div>
                    <div class="version-date">Dec 26, 2024 - 1.0-stable</div>
                    <ul>
                        <li>初始版本</li>
                        <li>尽管做了极大努力，但仍可能会有各种bug</li>
                        <li>请不要直接在项目中使用，应测试过后确认无误后再使用</li>
                    </ul>
                </div>
            </div>
        </section>

        <!-- 资源下载部分 -->
        <section id="resources" class="content-section">
            <h2>资源下载</h2>

            <p>R2Ga是开源项目，遵循GPL 3.0协议，您可以自由使用和修改。</p>

            <a href="https://github.com/HYTommm/PVZ_reanim2godot_animation" class="download-btn">访问GitHub仓库</a>
            <a href="https://github.com/HYTommm/PVZ_reanim2godot_animation/releases/latest" class="download-btn">下载最新版本</a>

            <h3>安装说明</h3>
            <ol>
                <li>下载对应平台的预编译版本</li>
                <li>解压到任意目录</li>
                <li>通过命令行调用工具</li>
                <li>确保Godot项目目录结构正确设置</li>
            </ol>

            <div class="warning-box">
                <h4>注意事项</h4>
                <p>本项目迭代较快，请使用最新版本</p>
                <p><strong>请注意数据备份！本工具不保证数据安全！</strong></p>
                <p>若遇到bug，请在GitHub上提交issue，我们会尽快修复。</p>
            </div>

            <h3>从源代码构建（尚未测试）</h3>
            <div class="code-block">
                <code>
                    # 克隆仓库<br>
                    git clone https://github.com/HYTommm/PVZ_reanim2godot_animation.git<br>
                    <br>
                    # 进入目录<br>
                    cd PVZ_reanim2godot_animation<br>
                    <br>
                    # 编译<br>
                    make<br>
                    <br>
                    # 安装(可选)<br>
                    sudo make install<br>
                </code>
            </div>
        </section>

        <!-- 联系我们部分 -->
        <section id="contact" class="content-section">
            <h2>联系我们</h2>

            <div class="contact-info">
                <div class="contact-item">
                    <span class="contact-label">作者:</span>
                    HYTOMZ (<a href="https://github.com/HYTommm">GitHub主页</a>)
                </div>
                <div class="contact-item">
                    <span class="contact-label">思路提供/测试:</span>
                    Furau (<a href="https://github.com/E72UJ">GitHub主页</a>)
                </div>
                <div class="contact-item">
                    <span class="contact-label">QQ群:</span>
                    1018028780
                </div>
                <div class="contact-item">
                    <span class="contact-label">邮箱:</span>
                    <a href="mailto:3146776307@qq.com">3146776307@qq.com</a>
                </div>
            </div>

            <h3>问题反馈</h3>
            <p>如果您在使用过程中遇到任何问题，请通过以下方式反馈：</p>
            <ul>
                <li>在GitHub仓库提交Issue</li>
                <li>加入QQ群讨论</li>
                <li>发送邮件说明问题</li>
            </ul>



            <h3>贡献指南</h3>
            <p>欢迎贡献代码或文档！请遵循以下步骤：</p>
            <ol>
                <li>Fork项目仓库</li>
                <li>创建特性分支 (git checkout -b feature/your-feature)</li>
                <li>提交更改 (git commit -am 'Add some feature')</li>
                <li>推送到分支 (git push origin feature/your-feature)</li>
                <li>创建Pull Request</li>
            </ol>
        </section>

        <footer>
            <p>R2Ga (PvZ Reanim to Godot Animation) © 2023 - 遵循GPL 3.0开源协议</p>
            <p>项目仓库: <a href="https://github.com/HYTommm/PVZ_reanim2godot_animation">https://github.com/HYTommm/PVZ_reanim2godot_animation</a></p>
            <p>植物大战僵尸是PopCap Games的注册商标 | Godot是Godot Engine的商标</p>
        </footer>
    </main>

    <script>
        // 切换内容部分的显示
        document.querySelectorAll('.nav-menu a').forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                
                // 更新导航栏active状态
                document.querySelectorAll('.nav-menu a').forEach(a => a.classList.remove('active'));
                this.classList.add('active');
                
                // 隐藏所有内容部分
                document.querySelectorAll('.content-section').forEach(section => {
                    section.classList.remove('active');
                });
                
                // 显示选中的内容部分
                const sectionId = this.getAttribute('data-section');
                document.getElementById(sectionId).classList.add('active');
                
                // 更新URL哈希
                window.location.hash = `#${sectionId}`;
                
                // 滚动到顶部
                window.scrollTo(0, 0);
            });
        });
        
        // 初始化显示正确的内容部分
        function initContent() {
            const hash = window.location.hash.substring(1) || 'intro';
            const navLink = document.querySelector(`.nav-menu a[data-section="${hash}"]`);
            
            if (navLink) {
                document.querySelectorAll('.nav-menu a').forEach(a => a.classList.remove('active'));
                navLink.classList.add('active');
                
                document.querySelectorAll('.content-section').forEach(section => {
                    section.classList.remove('active');
                });
                
                document.getElementById(hash).classList.add('active');
            }
        }
        
        // 页面加载时初始化
        window.addEventListener('load', initContent);
        
        // 哈希变化时更新显示
        window.addEventListener('hashchange', initContent);
    </script>
</body>
</html>